<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3</title>
<style>
    /* 
    1、选择器

    1) id选择器
    2) class选择器
    3) 分组选择器   例如：div,p  选取 <div> 和 <p> 元素
    4) 嵌套选择器   例如：p.marked  选取 class="marked" 的 <p> 元素
    5) 后代选择器(空格 分隔)    例如：div p  选取 <div> 内的 <p> 元素
    6) 子元素选择器(大于 > 号分隔)  例如：div>p  选取 <div> 内的一级子元素 <p>
    7) 相邻兄弟选择器(加号 + 分隔)  例如：div+p  选取 <div> 后的第一个同级 <p> 元素
    8) 普通兄弟选择器(波浪号 ~ 分隔)    例如：div~p  选取 <div> 后的同级 <p> 元素

    9) 伪类选择器   例如：p:first-child，匹配 <p> 的父元素的第一个<p>元素。 https://www.runoob.com/css/css-pseudo-classes.html。

    10)属性选择器 例如：input[type="text"]，选取文本输入框
    */
    #id-1 {
        color:red;
    } 
    .class-1 {
        text-align:center;
    }


    /*
    2、背景

    background-color    背景颜色
    background-image    背景图像
    background-repeat   背景图像-水平或垂直平铺
                        no-repeat 不平铺
                        repeat 默认,垂直和水平平铺
                        repeat-x 水平平铺
                        repeat-y 垂直平铺
    background-position 设置背景图像的起始位置
                        left top
                        left center
                        left bottom
                        right top
                        right center
                        right bottom
                        center top
                        center center
                        center bottom 如果仅指定一个关键字，其他值将会是"center"。
                        x% y% 第一个值是水平位置，第二个值是垂直。左上角是0％0％，右下角是100％100％。如果仅指定了一个值，其他值将是50％，默认值为：0％0％。
                        xpos ypos 第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。可以混合使用％和pos。

    简写按上面顺序  background: red url('./favicon.png') no-repeat right top;
    
    background-size 背景图像的大小
    */
    #id-2 {
        background-color: red;
        background-image: url('./favicon.png');
        background-repeat: no-repeat;
        background-position: right top;
    }


    /*
    3、文本

    color   文本颜色
    letter-spacing  字符间距
    word-spacing    设置字间距
                    normal 默认。
                    length 定义单词间的固定空间。
    line-height 行间距
                number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
                length 设置固定的行间距。
                % 基于当前字体尺寸的百分比行间距。
    text-align  文本对齐
                left 默认，把文本排列到左边。
                right 把文本排列到右边。
                center 把文本排列到中间。
    text-decoration 文本修饰
                    none 默认。
                    underline 下划线。
                    overline 上划线。
                    line-through 中划线。
    text-indent 首行文本缩进
                length 定义固定的缩进。默认值：0。
                % 定义基于父元素宽度的百分比的缩进。
    text-shadow 设置文本阴影
                h-shadow 必需。水平阴影的位置。允许负值。
                v-shadow 必需。垂直阴影的位置。允许负值。
                blur 可选。模糊的距离。
                color 可选。阴影的颜色。
    text-transform  控制元素中的字母
                    none 默认。
                    capitalize 文本中的每个单词以大写字母开头。
                    uppercase 都转换为大写字母。
                    lowercase 都转换为小写字母。
    vertical-align  垂直对齐
                    baseline 默认。元素放置在父元素的基线上。
                    sub	垂直对齐文本的下标。
                    super 垂直对齐文本的上标。
                    top 把元素的顶端与行中最高元素的顶端对齐。
                    middle 把此元素放置在父元素的中部。
                    bottom 使元素及其后代元素的底部与整行的底部对齐。
                    text-top 把元素的顶端与父元素字体的顶端对齐。
                    text-bottom 把元素的底端与父元素字体的底端对齐。
                    length 将元素升高或降低指定的高度，可以是负数。
                    % 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
    white-space 设置空白字符（制表位、空格、换行符等）的处理方式
                normal	默认，空白字符被忽略，自动换行。
                nowrap	空白字符被忽略，不会自动换行。
                pre	保留空白字符，不会自动换行。
                pre-wrap 保留空白字符，会自动换行。
                pre-line 合并空白符序列，但是保留换行符，并且会自动换行。
    */
    #id-3 {
        color: black;
        letter-spacing: 5px;
        word-spacing: 15px;
        line-height: 2;
        text-align: left;
        text-decoration: underline red 1px;
        text-indent: 50px;
        text-shadow: 4px 4px 2px red;
        text-transform: capitalize;
        vertical-align: middle;
        white-space: normal;
    }


    /*
    4、字体

    font-family 指定文本字体。如果浏览器不支持第一个字体，则会尝试下一个。
    font-size   指定文本的字体大小
                length 设置为固定值。
                % 设置为基于父元素的一个百分比值。
    font-style  指定文本的字体样式
                normal	默认值。浏览器显示一个标准的字体样式。
                oblique	浏览器会显示一个倾斜的字体样式。
    font-weight 指定字体的粗细。
                normal 默认值。定义标准的字符。
                bold 定义粗体字符。
    */
    /* 在 @font-face 规则中，必须首先定义字体的名称（比如 myFirstFont），然后使用 font-family 指向该字体文件。 */
    @font-face {
        font-family: myFirstFont;  
        src: url('xxxx.woff');
    }
    #id-4 {
        font-family: myFirstFont;
        font-size: 20px;
        font-style: oblique;
        font-weight: bold;
    }


    /*
    5、链接
    */
    #id-5:hover { 
        /* 鼠标移动到链接上 */
        color: #0000FF;
    } 
 
    
    /*
    6、列表

    list-style-type 设置列表项标记的类型，参考 https://www.runoob.com/cssref/pr-list-style-type.html 。
    list-style-image    使用图像来替换列表项的标记。
                        none 默认。
                        URL 图像的路径。
    */
    #id-6-1 {
        list-style-type: none;
    } 
    #id-6-2 {
        list-style-image: url('./favicon.png');
    }


    /*
    7、表格
    */
    #id-7 {
        border-collapse: collapse; /* 表格的边框折叠成一个单一的边框 */
    }
    #id-7,th,td {
        border: 1px solid black;
    }
   

    /*
    8、边框 width height

    border-width    设置边框宽度
    border-style    设置边框样式
                    none 定义无边框。
                    hidden 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
                    dotted 定义点状边框。
                    dashed 定义虚线。
                    solid 定义实线。
                    double 定义双线。
    border-color    设置边框颜色

    border-radius	设置圆角的边框
                    length 设置一个固定值。
                    % 设置一个百分比值。

    box-shadow  设置边框阴影
                h-shadow 必需。水平阴影的位置。允许负值。
                v-shadow 必需。垂直阴影的位置。允许负值。
                blur 可选。模糊的距离。
                color 可选。阴影的颜色。
    */
    #id-8 {
        width: 50px;
        height: 50px;

        border: 1px solid red;

        border-radius: 5px 10px 15px 20px;

        box-shadow: 10px 10px 5px #888888;
    }


    /*
    9、margin padding
    */
    #id-9 {
        width: 100px;
        color: black;
        background-color: red;

        margin: 5px 10px 15px 20px;
        padding: 5px 10px 15px 20px;
    }


    /*
    10、display visibility

    display: none; 隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。
    visibility: hidden; 隐藏某个元素，且隐藏的元素不会占用任何空间。

    display: inline; 将块元素显示为内联元素。
    display: block; 将内联元素显示为块元素。
    注意：一个内联元素设置为display:block是不允许它内部有嵌套块元素。
    */
   

    /*
    11、position(定位)、z-index(重叠的元素)

    position    定位
                static 默认值，即没有定位，遵循正常的文档流对象。不会受 top, bottom, left, right影响。
                relative 相对定位，元素相对其正常位置定位。
                fixed 固定定位，元素的位置相对于浏览器窗口是固定位置。
                absolute 绝对定位，元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。
                sticky 粘性定位，元素是依赖于用户的滚动。只有再指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

    z-index     元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素，z-index属性指定了一个元素的堆叠顺序。
    */
    #id-11 {
        position: -webkit-sticky; /* Safari */
        position: sticky;
        top: 0;
        background-color: green;
        border: 2px solid #4CAF50;
    }


    /*
    12、float(浮动)、clear(清除浮动)

    float   使元素向左或向右移动，其周围的元素也会重新排列
            left 元素向左浮动。
            right 元素向右浮动。
            none 默认值。元素不浮动。

    clear   指定元素两侧不能出现浮动元素
            left 在左侧不允许浮动元素。
            right 在右侧不允许浮动元素。
            both 在左右两侧均不允许浮动元素。
            none 默认值。允许浮动元素出现在两侧。
    */
    #id-12 {
        float: right;
        margin: 15px;
    }


    /*
    13、overflow

    overflow    控制内容溢出元素框时显示的方式
                visible	默认值。内容不会被修剪，会呈现在元素框之外。
                hidden 内容会被修剪，并且其余内容是不可见的。
                scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
                auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
    */
    #id-13 {
        background-color: #eee;
        width: 200px;
        height: 50px;
        border: 1px dotted black;
        overflow: auto;
    }


    /*
    14、!important

    使用 !important 时，此声明将覆盖任何其他声明。示例：  p { background-color: red !important; }
    */


</style>
</head>

<body>

    <p id="id-1" class="class-1">selector</p>


    <p id="id-2">background</p>


    <p id="id-3">
        Spring makes programming Java quicker, easier, and safer for everybody.
        Spring makes programming Java quicker, easier, and safer for everybody.
        Spring makes programming Java quicker, easier, and safer for everybody.
    </p>


    <p id="id-4">
        Spring makes programming Java quicker, easier, and safer for everybody.
        Spring makes programming Java quicker, easier, and safer for everybody.
        Spring makes programming Java quicker, easier, and safer for everybody.
    </p>
    

    <p><a id="id-5" href="https://cn.bing.com" target="_blank">这是一个链接</a></p>


    <ul id="id-6-1">
        <li>Google</li>
        <li>Runoob</li>
        <li>Taobao</li>
    </ul>
    <ul id="id-6-2">
        <li>Google</li>
        <li>Runoob</li>
        <li>Taobao</li>
    </ul>


    <table id="id-7">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
        </tr>
        <tr>
            <td>Peter</td>
            <td>Griffin</td>
        </tr>
        <tr>
            <td>Lois</td>
            <td>Griffin</td>
        </tr>
    </table>


    <p id="id-8">
        边框
    </p>


    <span id="id-9">
        margin padding
    </span>


    <p>尝试滚动页面。</p>
    <div id="id-11">我是粘性定位!</div>
    <div>
        <p>滚动</p>
        <p>来回滚动</p>
    </div>


    <p>图片会浮动在段落的右边</p>
    <p>
        <img id="id-12" src="./favicon.png" width="95" height="84" />
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
    </p>
    

    <div id="id-13">
        <p>这里的文本内容会溢出元素框。</p>
        <p>这里的文本内容会溢出元素框。</p>
        <p>这里的文本内容会溢出元素框。</p>
    </div>


</div>

</body>
</html>